<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>天天生鲜-商品列表</title>
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/main.css" />
		<link rel="stylesheet" href="/css/element.css" />
	</head>

	<body>
		<div id="app">
			<!--头部导航菜单-->
			<div class="header_con">
				<div class="header">
					<div class="welcome fl">欢迎来到天天生鲜!</div>

					<div class="fr">
						<div class="login_info fl" v-if="isLogin">
							欢迎您：<em>{{user.nickname}}</em>
							<span>&emsp;|&emsp;</span>
						</div>

						<div class="login_btn fl" v-if="!isLogin">
							<a href="/login.html">登录</a>

							<span>|</span>

							<a href="/register.html">注册</a>
						</div>

						<div class="user_link fl" v-else>
							<a href="/html/cart.html">我的购物车</a>

							<span>|</span>

							<a href="/html/user_center.html">用户中心</a>

							<span>|</span>

							<a href="javascript:;" @click="logout">退出登录</a>
						</div>
					</div>
				</div>
			</div>

			<div class="search_bar clearfix">
				<a href="/" class="logo fl">
					<img src="/images/logo.png"  alt="" />
				</a>

				<div class="search_con fl">
					<input class="input_text fl" v-model="name" placeholder="搜索商品" />
					<input type="button" class="input_btn fr" value="搜索" @click="select" />
				</div>

				<div class="guest_cart fr">
					<a href="/html/cart.html" class="cart_name fl">我的购物车</a>
					<div class="goods_count fl">{{count}}</div>
				</div>
			</div>

			<div class="navbar_con">
				<div class="navbar clearfix">
					<div class="subnav_con fl">
						<h1>全部商品分类</h1>
						<span></span>
						<ul class="subnav fl">
							<li v-for="c in categoryArr">
								<a href="javascript:void(0)" :class="c.cls" @click="set(c.id)">{{c.name}}</a>
							</li>
						</ul>
					</div>

					<ul class="navlist fl">
						<li><a href="/">首页</a></li>
						<li class="interval">|</li>
						<li><a href="/">手机生鲜</a></li>
						<li class="interval">|</li>
						<li><a href="/">抽奖</a></li>
					</ul>
				</div>
			</div>

			<div class="breadcrumb">
				<a href="javascript:;">全部分类</a>
				<span>&gt;</span>
				<a href="javascript:;">{{cname}}</a>
			</div>

			<div class="main_wrap clearfix">
				<div class="l_wrap fl clearfix">
					<div class="new_goods">
						<h3>新品推荐</h3>

						<ul>
							<li v-for="recommend in recommends">
								<a href="javascript:;">
									<img :src="recommend.imgUrl"  alt="" />
								</a>
								<h4><a href="javascript:;">{{recommend.name}}</a></h4>
								<div class="prize">￥{{recommend.price}}</div>
							</li>
						</ul>
					</div>
				</div>

				<div class="r_wrap fr clearfix">
					<div class="sort_bar">
						<a href="javascript:;" :class="tabIndex == 0 ? 'active' : ''" @click="setTab(0)">默认</a>
						<a href="javascript:;" :class="tabIndex == 1 ? 'active' : ''" @click="setTab(1)">价格</a>
						<a href="javascript:;" :class="tabIndex == 2 ? 'active' : ''" @click="setTab(2)">人气</a>
					</div>

					<ul class="goods_type_list clearfix">
						<li v-for="product in products">
							<a :href="'/html/detail.html?id=' + product.id">
								<img :src="product.imgUrl" alt="" />
							</a>

							<h4><a :href="'/detail.html?id=' + product.id">{{product.name}}</a></h4>

							<div class="operate">
								<span class="prize">￥{{product.price}}</span>
								<span class="unit">{{product.price}}/{{product.unit}}</span>
								<a href="javascript:;" class="add_goods" title="加入购物车" @click="toCart(product.id)"></a>
							</div>
						</li>
					</ul>

					<div class="pagenation">
						<el-pagination background
							   layout="total, sizes, prev, pager, next, jumper"
							   @current-change="handleCurrentChange"
							   @size-change="handleSizeChange"
							   :hide-on-single-page="value"
							   :current-page="currentPage"
							   :page-sizes="pageSizes"
							   :page-size="pageSize"
							   :total="total">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>

		<!--footer-->
		<div class="footer">
			<div class="foot_link">
				<a href="javascript:;">关于我们</a>
				<span>|</span>
				<a href="javascript:;">联系我们</a>
				<span>|</span>
				<a href="javascript:;">招聘人才</a>
				<span>|</span>
				<a href="javascript:;">友情链接</a>
			</div>

			<p>CopyRight © 2022 福州天天生鲜信息技术有限公司 All Rights Reserved</p>
			<p>电话：010-****888    京ICP备*******8号</p>
		</div>

		<script src="/js/vue.js"></script>
		<script src="/js/element.js"></script>
		<script src="/js/axios.min.js"></script>
		<script src="/js/list.js"></script>
	</body>
</html>